/** todo组件中的item列表 */
<template>
  <div :class="['todo-item', todo.completed ? 'complete' : '']">
      <input 
        type="checkbox" 
        v-model="todo.completed"
      />
    <label>{{todo.content}}</label>
    <button @click="deleteTodo">Delete</button>
  </div>
</template>

<script>
export default {
  name: "TodoItem",
  props: {
      todo: {
          type: Object,
          required: true
      }
  },
  data () {
    return {
    };
  },
  methods: {
      deleteTodo() {
        this.$emit('deleteTodo', this.todo.id)
      }
  }
}
</script>

<style lang="scss" scoped>
</style>